import React, { useRef, useEffect, useMemo } from "react";
import { type CommonComponentProps } from "../Page/dev";

import { Table as AntTable } from "antd";
import { useDrag } from "react-dnd";
import { useMaterialDrop } from "@editor/hooks/useMaterialDrop";

export default function Table({ id, name, children, styles }: CommonComponentProps) {

    const divRef = useRef<HTMLDivElement | null>(null)

    const [_, drag] = useDrag({
        type: name,
        item: {
            type: name,
            dragType: 'move',
            id
        }
    })
    const { canDrop, drop } = useMaterialDrop(['TableColumn'], id)

    const columns = useMemo(() => {
        return React.Children.map(children, (item: any) => {
            return {
                title: <div className="m-[-16px] p-[16px]" data-component-id={item.props?.id}>{item.props?.title}</div>,
                dataIndex: item.props?.dataIndex,
                key: item
            }
        })
    }, [children])

    useEffect(() => {
        drag(divRef);
        drop(divRef);
    }, [])

    return (
        <div className={`w-[100%] ${canDrop ? 'border-[2px] border-[blue]' : 'border-[1px] border-[#000]'}`} ref={divRef} style={styles} data-component-id={id}>
            <AntTable columns={columns} dataSource={[]} pagination={false} />
        </div>
    )
}